<template>
	<div class="data">
		<curr-app :left="245"></curr-app>
		<list-title :data="header"></list-title>
		<el-form :model="dynamicDataForm" :rules="rules" ref="dynamicDataForm" label-width="200px">
			<el-form-item label="数据名称" prop="data.name" style="width: 600px;">
				<el-input v-model="dynamicDataForm.data.name" placeholder="数据名称"></el-input>
			</el-form-item>
			<el-form-item label="数据可选标示" prop="falgData.flagname" style="width: 600px;">
				<el-input type="textarea" :rows="4" placeholder="请输入内容" v-model="dynamicDataForm.falgData.flagname"></el-input>
				<p class="help">一行为一个值, 最多4个值</p>
			</el-form-item>
			<el-form-item label="默认标示" prop="data.flagname" style="width: 600px;" v-if="checkFalgData(dynamicDataForm.falgData.flagname).length">
				<el-checkbox-group v-model="defaultFlags">
					<el-checkbox v-for="(item, index) in checkFalgData(dynamicDataForm.falgData.flagname)" :key="index" :label='item'></el-checkbox>
				</el-checkbox-group>
			</el-form-item>
			<el-form-item label="必须会员提交" prop="data.is_member">
				<el-switch v-model="dynamicDataForm.data.is_member"></el-switch>
			</el-form-item>
			<el-form-item label="是否发送积分" prop="data.send_integral" v-if="dynamicDataForm.data.is_member">
				<el-switch v-model="dynamicDataForm.data.send_integral"></el-switch>
			</el-form-item>
			<el-form-item label="每次发送积分" prop="data.integral" v-if="dynamicDataForm.data.is_member && dynamicDataForm.data.send_integral">
				<el-input-number v-model="dynamicDataForm.data.integral" :min="0" :max="1000" label="每次发送积分">
				</el-input-number>
			</el-form-item>
			<el-form-item label="最多发送积分量" prop="data.max_integral" v-if="dynamicDataForm.data.is_member && dynamicDataForm.data.send_integral">
				<el-input-number v-model="dynamicDataForm.data.max_integral" 
				:min="dynamicDataForm.data.integral" 
				:max="10000" 
				:step="dynamicDataForm.data.integral" label="最多发送积分量">
				</el-input-number>
				<p class="help">每天每人最多发送量</p>
			</el-form-item>
			<el-form-item label="最多提交数据量" prop="data.max_times">
				<el-input-number v-model="dynamicDataForm.data.max_times" :min="0" :max="10000" label="最多提交数据量"></el-input-number>
				<p class="help">每天每人最多量，按照IP+SESSIONID计算每个人</p>
			</el-form-item>
			<el-form-item label="是否需要审核" prop="data.audit">
				<el-switch v-model="dynamicDataForm.data.audit"></el-switch>
				<p class="help">如果前台显示的话</p>
			</el-form-item>
			<el-form-item label="前台是否可以回复" prop="data.can_reply">
				<el-switch v-model="dynamicDataForm.data.can_reply"></el-switch>
			</el-form-item>
			<el-form-item label="是否显示" prop="data.display">
				<el-switch v-model="dynamicDataForm.data.display"></el-switch>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="submitForm('dynamicDataForm')" :disabled='dynamicDataForm.submitLock'>
					确 定 <span class="el-icon-loading" v-if='dynamicDataForm.submitLock'></span>
				</el-button>
				<el-button @click="resetForm('dynamicDataForm')" v-if='dynamicDataForm.data.id==0'>重 置</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import ListTitle from "pc/common/Title"
import {changeToBool} from "static/js/common.js"
import CurrApp from "pc/common/CurrApp"

export default {
	data() {
		return {
			/*appid*/
			appid: this.$route.query.appid,
			/*头部数据*/
			header: {
				title: '添加自定义表单',
				buttons: [
					{
						title: '自定义表单',
						type: 'primary',
						pathName: 'pc/cms/instance/dynamicData/DynamicDataList',
						query: {
							appid: this.$route.query.appid,
						},
					}
				]
			},
			/*字段数据*/
			defaultFlags: [],//选择的 默认标示
			dynamicDataForm: {
				submitLock: false,
				parentid: '',//选择的栏目ID
				data: {
					id: 0,
					name: '',
					defaultFlagnum: [],
					is_member: false,
					send_integral: false,
					integral: 0,
					max_integral: 0,
					max_times: 1,
					audit: false,
					can_reply: false,
					display: true,
				},
				/*标示数据*/
				falgData: {
					flagname: ''
				}
			},
			rules: {
				data: {
					name: [
						{ required: true, message: '请输入数据名称', trigger: 'blur' },
						{ min: 2, max: 16, message: '长度在 2 到 16 个字符', trigger: 'blur' }
					],
				}
			}
		};
	},
	components: {
		ListTitle,
		CurrApp
	},
	created: function() {
		/*如果是修改，取出旧数据*/
		if(this.$route.query.id){
			this.getDynamicData(this.$route.query.id)
		}
	},
	methods: {
		/*取出需要修改的数据*/
		getDynamicData: function(){
			this.header.title = '编辑自定义表单'
			/*取出需要修改的数据*/
			this.dynamicDataForm.submitLock = true;
			this.$baseURL(this.$domain.cms)
			this.$get(this.$api.modifyDynamicData, {
				appid: this.appid,
				'id': this.$route.query.id
			}).then(res => {
				if(res.data.code == 0){
					// console.log(res.data.data)
					this.dynamicDataForm.data.id = res.data.data.dynamic_id
					this.dynamicDataForm.data.name = res.data.data.name
					/*注释原因，因为只要有默认选择，提交的时候，会计算出此数据*/
					// this.dynamicDataForm.data.defaultFlagnum = res.data.data.defaultFlagnum
					this.dynamicDataForm.data.is_member = changeToBool(res.data.data.is_member)
					this.dynamicDataForm.data.send_integral = changeToBool(res.data.data.send_integral)
					this.dynamicDataForm.data.integral = parseInt(res.data.data.integral)
					this.dynamicDataForm.data.max_integral = res.data.data.max_integral
					this.dynamicDataForm.data.max_times = res.data.data.max_times
					this.dynamicDataForm.data.audit = changeToBool(res.data.data.audit)
					this.dynamicDataForm.data.can_reply = changeToBool(res.data.data.can_reply)
					this.dynamicDataForm.data.display = changeToBool(res.data.data.display)
					this.dynamicDataForm.falgData.flagname = (res.data.data.flag != null)?res.data.data.flag.flagname:''
					
					if(res.data.data.defaultFlagnum){
						// console.log('dfdfdfd')
						for(let i=0; i<res.data.data.defaultFlagnum.length; i++){
							let key = res.data.data.defaultFlagnum[i]
							// console.log(this.checkFalgData(this.dynamicDataForm.falgData.flagname)[key])
							this.defaultFlags.push(this.checkFalgData(this.dynamicDataForm.falgData.flagname)[key])
						}
					}
				}else{
					this.$message({
						showClose: true,
						message: res.data.info,
						type: 'error'
					});
				}
				this.dynamicDataForm.submitLock = false;
			})
			.catch(err => {})
			.finally(() => {}) 
		},
		/*提交添加、修改表单*/
		submitForm(formName) {
			if(!this.dynamicDataForm.submitLock){
				this.$refs[formName].validate((valid) => {
					if (valid) {
						/*计算选择的默认标示*/
						// console.log(this.defaultFlags)
						this.dynamicDataForm.data.defaultFlagnum = []
						if(this.defaultFlags.length){
							for(let j=0; j<this.checkFalgData(this.dynamicDataForm.falgData.flagname).length; j++){
								for(let i=0; i<this.defaultFlags.length; i++){
									if(this.defaultFlags[i] == this.checkFalgData(this.dynamicDataForm.falgData.flagname)[j]){
										// console.log(j)
										this.dynamicDataForm.data.defaultFlagnum.push(j)
									}
								}
							}
						}
						// console.log(this.dynamicDataForm.data)
						// return

						// console.log(this.dynamicDataForm.data)
						// return
						this.dynamicDataForm.submitLock = true;
						/*添加、修改分类*/
						let apiUrl = this.$api.addDynamicData//默认是添加
						if(this.dynamicDataForm.data.id > 0){//修改
							apiUrl = this.$api.modifyDynamicData
						}
						/*添加*/
						this.$baseURL(this.$domain.cms)
						this.$post(apiUrl, {
							appid: this.appid,
							DynamicData: this.dynamicDataForm.data,
							DynamicDataFlag: this.dynamicDataForm.falgData,
						}).then(res => {
							// console.log(res);
							/*成功*/
							if(res.data.code == 0){
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'success'
								});
								if(this.dynamicDataForm.data.id > 0){
									this.$router.go(-1)	
								}else{
									this.$refs[formName].resetFields();
								}
							}else{
								this.$message({
									showClose: true,
									message: res.data.info,
									type: 'error'
								});
							}
							this.dynamicDataForm.submitLock = false;
						});
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			}
		},
		/*重置表单*/
		resetForm(formName) {
			this.$refs[formName].resetFields();
		},
	},
	computed: {
		/*监听 标示的变化*/
		checkFalgData(val) {
			return function (val) {
				let data = []
				if(val){
					data = val.split(/[\n,]/g)
					for(let i=0; i<data.length; i++){
						if(data[i] == ''){
							data.splice(i, 1); 
						}
					}
				}
				// console.log(data)
				return data
			}
		},
	}
};
</script>

<style lang="stylus" scoped>
.data
	form
		margin-top: 10px
</style>